<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>宠物店</title>
  <link href="../images/ico/宠物.ico" rel="icon" type="image/x-ico">
  <link rel="stylesheet" href="../lib/layui/css/layui.css">
  <link rel="stylesheet" href="../css/page.css">
</head>

<body>
  <!-- 客服图标 -->
  <div class="service">
    <li><img src="../images/service/客服.png" width="100" height="122" />
      <ul>
        <li><img src="../images/service/图标01.png" width="60%" height="60%" title="登录" /></li>
        <li><img src="../images/service/图标02.png" width="60%" height="60%" title="@e-mail" /></li>
        <li><img src="../images/service/图标04.png" width="60%" height="60%" title="客服" /></li>
        <a href="#gotop">
          <li><img src="../images/service/返回顶部.png" width="60%" height="60%" title="返回顶部" /></li>
        </a>
      </ul>
    </li>
  </div>

  <!-- 导航栏部分 -->
  <div>
    <div class="head" id="gotop">
      <!-- <div class="signboard"><a href="register.html">宠物店</a></div> -->


      <ul class="layui-nav nav">
        <li class="layui-nav-item"><a href="">最新活动</a></li>
        <li class="layui-nav-item"><a href="">产品</a></li>
        <li class="layui-nav-item layui-this">
          <a href="javascript:;">购物车</a>
          <dl class="layui-nav-child">
            <!-- 二级菜单 -->
            <dd><a href="">订单 1</a></dd>
            <dd><a href="">订单 2</a></dd>
            <dd><a href="">订单 3</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="../html/user.html">我的</a></li>
      </ul>

      <!-- 搜索区域（搜索框和搜索按钮） -->
      <div class="search">
        <input type="text" placeholder="输入关键词">
        <button></button>
      </div>
    </div>

    <div class="layui-carousel" id="test1">
      <div carousel-item>
        <div><img src="../images/轮播图1.png" width="100%" height="100%" /></div>
        <div><img src="../images/轮播图1.png" width="100%" height="100%" /></div>
        <div><img src="../images/轮播图1.png" width="100%" height="100%" /></div>
      </div>
    </div>
  </div>


  <!-- banner部分end -->
  <!-- 精品推荐模块开始 -->
  <div class="goods w">
    <h3>精品推荐</h3>
    <ul>
      <li><a href="#">美毛/护毛</a></li>
      <li><a href="#">杀螨除菌</a></li>
      <li><a href="#">消炎止痒</a></li>
      <li><a href="#">除蚤灭虱</a></li>
      <li><a href="#">防脱毛</a></li>
    </ul>
    <a href="#" class="mod">全部</a>
  </div>

  <!-- 1-1. box核心内容区域开始 -->
  <div class="box w">
    <div class="box-hd">
      <h3>精品推荐</h3>
      <a href="#">查看全部</a>
    </div>
    <div class="box-bd">
      <ul class="clearfix">
        <li>
          <div class="model">
            <img src="../images/sh00.png" alt="">
            <div class="shopping">
              <div><img src="../images/购物.png" alt="" title="下单"></div>
            </div>
          </div>
          <h4>
            猫窝帐篷宠物繁殖箱生产用品全套
          </h4>
          <div class="info">
            <span>订单量</span> • 1125人购买
          </div>
        </li>

        <li>
          <div class="model">
            <img src="../images/sh02.png" alt="">
            <div class="shopping">
              <div id="shop"><img src="../images/购物.png" alt="" title="下单"></div>
            </div>
          </div>
          <h4>
            猫窝帐篷宠物繁殖箱生产用品全套
          </h4>
          <div class="info">
            <span>订单量</span> • 1125人购买
          </div>
        </li>

        <li>
          <div class="model">
            <img src="../images/sh01.png" alt="">
            <div class="shopping">
              <div id="shop"><img src="../images/购物.png" alt="" title="下单"></div>
            </div>
          </div>
          <h4>
            猫窝帐篷宠物繁殖箱生产用品全套
          </h4>
          <div class="info">
            <span>订单量</span> • 1125人购买
          </div>
        </li>

        <li>
          <div class="model">
            <img src="../images/sh03.png" alt="">
            <div class="shopping">
              <div id="shop"><img src="../images/购物.png" alt="" title="下单"></div>
            </div>
          </div>
          <h4>
            猫窝帐篷宠物繁殖箱生产用品全套
          </h4>
          <div class="info">
            <span>订单量</span> • 1125人购买
          </div>
        </li>

        <li>
          <div class="model">
            <img src="../images/sh04.png" alt="">
            <div class="shopping">
              <div id="shop"><img src="../images/购物.png" alt="" title="下单"></div>
            </div>
          </div>
          <h4>
            猫窝帐篷宠物繁殖箱生产用品全套
          </h4>
          <div class="info">
            <span>订单量</span> • 1125人购买
          </div>
        </li>

        <li>
          <div class="model">
            <img src="../images/sh05.png" alt="">
            <div class="shopping">
              <div id="shop"><img src="../images/购物.png" alt="" title="下单"></div>
            </div>
          </div>
          <h4>
            猫窝帐篷宠物繁殖箱生产用品全套
          </h4>
          <div class="info">
            <span>订单量</span> • 1125人购买
          </div>
        </li>

        <li>
          <div class="model">
            <img src="../images/sh06.png" alt="">
            <div class="shopping">
              <div id="shop"><img src="../images/购物.png" alt="" title="下单"></div>
            </div>
          </div>
          <h4>
            猫窝帐篷宠物繁殖箱生产用品全套
          </h4>
          <div class="info">
            <span>订单量</span> • 1125人购买
          </div>
        </li>

        <li>
          <div class="model">
            <img src="../images/sh07.png" alt="">
            <div class="shopping">
              <div id="shop"><img src="../images/购物.png" alt="" title="下单"></div>
            </div>
          </div>
          <h4>
            猫窝帐篷宠物繁殖箱生产用品全套
          </h4>
          <div class="info">
            <span>订单量</span> • 1125人购买
          </div>
        </li>

        <li>
          <div class="model">
            <img src="../images/sh08.png" alt="">
            <div class="shopping">
              <div id="shop"><img src="../images/购物.png" alt="" title="下单"></div>
            </div>
          </div>
          <h4>
            猫窝帐篷宠物繁殖箱生产用品全套
          </h4>
          <div class="info">
            <span>订单量</span> • 1125人购买
          </div>
        </li>

        <li>
          <div class="model">
            <img src="../images/sh09.png" alt="">
            <div class="shopping">
              <div id="shop"><img src="../images/购物.png" alt="" title="下单"></div>
            </div>
          </div>
          <h4>
            猫窝帐篷宠物繁殖箱生产用品全套
          </h4>
          <div class="info">
            <span>订单量</span> • 1125人购买
          </div>
        </li>

      </ul>
    </div>
  </div>

  <!-- 食物精品推荐模块开始 -->
  <div class="goods w">
    <h3>食物推荐</h3>
    <ul>
      <li><a href="#">食物</a></li>
      <li><a href="#">食物</a></li>
      <li><a href="#">食物</a></li>
      <li><a href="#">食物</a></li>
      <li><a href="#">食物</a></li>
    </ul>
    <a href="#" class="mod">全部</a>
  </div>

  <!-- 1-2. box核心内容区域开始 -->
  <div class="box w">
    <div class="box-hd">
      <h3>食品推荐</h3>
      <a href="#">查看全部</a>
    </div>
    <div class="box-bd">
      <ul class="clearfix">
        <li>
          <div class="model">
            <img src="../images/food/食物01.jpg" alt="">
            <div class="shopping">
              <div><img src="../images/购物.png" alt="" title="下单"></div>
            </div>
          </div>
          <h4>
            贝蒂宠物零食鸡胸肉切丝400g
          </h4>
          <div class="info">
            <span>订单量</span> • 1125人购买
          </div>
        </li>

        <li>
          <div class="model">
            <img src="../images/food/食物02.png" alt="">
            <div class="shopping">
              <div id="shop"><img src="../images/购物.png" alt="" title="下单"></div>
            </div>
          </div>
          <h4>
            软鸡肉条零食礼包成幼犬肉干400g
          </h4>
          <div class="info">
            <span>订单量</span> • 1125人购买
          </div>
        </li>

        <li>
          <div class="model">
            <img src="../images/food/食物03.png" alt="">
            <div class="shopping">
              <div id="shop"><img src="../images/购物.png" alt="" title="下单"></div>
            </div>
          </div>
          <h4>
            元气满满冻干鹌鹑蛋黄卵磷脂狗狗猫咪零食100g整罐
          </h4>
          <div class="info">
            <span>订单量</span> • 1125人购买
          </div>
        </li>

        <li>
          <div class="model">
            <img src="../images/food/食物04.png" alt="">
            <div class="shopping">
              <div id="shop"><img src="../images/购物.png" alt="" title="下单"></div>
            </div>
          </div>
          <h4>
            拌粮营养湿粮宠物幼犬零食500g
          </h4>
          <div class="info">
            <span>订单量</span> • 1125人购买
          </div>
        </li>

        <li>
          <div class="model">
            <img src="../images/food/食物05.png" alt="">
            <div class=" shopping">
              <div id="shop"><img src="../images/购物.png" alt="" title="下单"></div>
            </div>
          </div>
          <h4>
            猫窝帐篷宠物繁殖箱生产用品全套
          </h4>
          <div class="info">
            <span>订单量</span> • 1125人购买
          </div>
        </li>

        <li>
          <div class="model">
            <img src="../images/food/食物06.png" alt="">
            <div class="shopping">
              <div id="shop"><img src="../images/购物.png" alt="" title="下单"></div>
            </div>
          </div>
          <h4>
            鸡肉干狗狗零食小型犬狗泰迪宠物零食
          </h4>
          <div class="info">
            <span>订单量</span> • 1125人购买
          </div>
        </li>

        <li>
          <div class="model">
            <img src="../images/food/食物07.png" alt="">
            <div class="shopping">
              <div id="shop"><img src="../images/购物.png" alt="" title="下单"></div>
            </div>
          </div>
          <h4>
            补钙发育牛乳0乳糖犬猫通用零
          </h4>
          <div class="info">
            <span>订单量</span> • 1125人购买
          </div>
        </li>

        <li>
          <div class="model">
            <img src="../images/food/食物08.png" alt="">
            <div class="shopping">
              <div id="shop"><img src="../images/购物.png" alt="" title="下单"></div>
            </div>
          </div>
          <h4>
            零食牛肉鸡肉芝士蛋糕杯塔塔杯猫罐头
          </h4>
          <div class="info">
            <span>订单量</span> • 1125人购买
          </div>
        </li>

        <li>
          <div class="model">
            <img src="../images/food/食物09.png" alt="">
            <div class="shopping">
              <div id="shop"><img src="../images/购物.png" alt="" title="下单"></div>
            </div>
          </div>
          <h4>
            零食幼犬湿粮猫罐头金毛拌饭狗粮伴侣
          </h4>
          <div class="info">
            <span>订单量</span> • 1125人购买
          </div>
        </li>

        <li>
          <div class="model">
            <img id="image" src="../images/food/食物10.png" alt="">
            <div class="shopping">
              <div id="shop"><img src="../images/购物.png" alt="" title="下单"></div>
            </div>
          </div>
          <h4>
            磨牙骨泰迪牛皮卷训犬宠物零食
          </h4>
          <div class="info">
            <span>订单量</span> • 1125人购买
          </div>
        </li>

      </ul>
    </div>
  </div>

  <!-- 底层部分 -->
  <div class="footer">
    <div>
      <ul>
        <li> 常见问题</li>
        <li> 产品服务</li>
        <li><a href="#"> 帮助中心</a></li>
        <li><a href="#">发票/售后</a></li>
        <li> 关于快乐小屋</li>
        <li><a href="#">加 入 我 们 吧</a></li>
      </ul>
    </div>
    <div class="foot">为了防范电信网络诈骗，如网民接到962110电话，请立即接听
    </div>
  </div>


  <!-- 添加分类的弹出层 -->
  <script type="text/html" id="dialog-add">
    <div class="order">
    <div class="layui-form-item">
      <label class="layui-form-label">是否下单</label>

    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">确认下单</button>
        </div>
    </div>
  </div>
  </script>
  <script src="../lib/layui/layui.all.js"></script>
  <script src="../lib/jquery.js"></script>
  <script src="../lib/layui/layui.js"></script>
  <script src="../js/page.js"></script>
</body>

</html>
</div>